<extend name="Public/index"/>
<block name="pageHeader">
    <include file="Public/header.channel" channel="活动列表"/>
</block>
<block name="pageContent">
    <style>
        a:hover{color: #333;}
        .list_left{width: 15em;float: left}
        .list_left img{width: 100%;}
        .list_right{position: relative;padding-left:15.5em; height: 9em}
        .list_right .text_one{
            font-size: 12px;
            color: #98a4b4;
            margin: 0 0 2px;
            line-height: 16px;
            word-break: break-all;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
        }
        .list_right .text_two{
            font-size: 12px;
            color: #98a4b4;
            margin: 0 0 2px;
            line-height: 16px;
            word-break: break-all;
            overflow: hidden;
            overflow-x: hidden;
            overflow-y: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
        }
        .list_right .text_three{
            margin: 0;
            display: inline;
            color: #f93;
            font-size: 13px;
            line-height: 20px;
            float: left;
            position: absolute;
            bottom: -3px;
            /*left: 14.5em;*/
        }
        .list_right .text_tip{
            padding: 4px;
            color: #f93;
            font-size: 12px;
            border: 1px solid #f93;
            border-radius: 2px;
            background: #fff7ef;
            position: absolute;
            bottom: 0;
            right: 0;
            margin: 0;
            line-height: 12px;
        }
        .list_right h3{font-size: 1.2em;font-weight: bold;max-height: 60px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
           }

        .list-box1{padding: 1em;}
        .list-box{margin-top: 0;position: relative;}


        .good_nav{width: 100%;height: 2.5em;background-color: #F0EFF4;box-sizing: border-box;display: flex;padding: 0.5em 0;font-size: 1.5em;}
        .good_nav .good_nav_sub{width: 33.3%;border-left: solid 1px #D4D4D4;height: 100%;text-align: center;position: relative;}
        .good_nav .good_nav_sub:first-child{border-left:none;}
        .icon_down{background: url("/Public/Home/images/down.png") no-repeat 0.1em;padding:0 1em;}
        .icon_up{background: url("/Public/Home/images/up.png") no-repeat 0.1em;padding:0 1em;}
        .good_nav .good_nav_sub1{
            top: 6.5em;position:fixed;width: 301%;min-height: 10em;z-index: 999;left: 0;
            text-align: left;box-sizing: border-box;display: none;
        }
        .good_nav .good_nav_sub1 ul{padding: 1em;background-color: #fff; }
        .good_nav .good_nav_sub1 li{padding: 0.5em 0;border-bottom: solid 1px #D4D4D4; }
        .good_nav .good_nav_sub1 li a{display: inline-block;width: 100%;height: 100%; }
        .good_nav .good_nav_sub1 li:last-child{border-bottom:none }
        .pop{width: 101%;background-color: rgba(0,0,0,0.5);height: 90em;}
    </style>
     <div class="good_nav">
        <div class="good_nav_sub">
            活动类型&nbsp; <i class="icon_down"></i>
            <div class="good_nav_sub1">
                <div class="pop">
                    <ul>
                        <li><a href="{:U('Order/goods')}">全部</a></li>
                        <li><a href="{:U('Order/goods?type=1')}">HR沙龙活动</a></li>
                        <li><a href="{:U('Order/goods?type=2')}">劳动法沙龙活动</a></li>
                        <li><a href="{:U('Order/goods?type=3')}">职涯沙龙活动</a></li>
                    </ul>
                </div>

            </div>
        </div>
        <div class="good_nav_sub">
            时间&nbsp; <i class="icon_down"></i>
            <div class="good_nav_sub1">
                <div class="pop">
                    <ul>
                        <li><a href="{:U('Order/goods')}">全部</a></li>
                        <li><a href="{:U('Order/goods?time=1')}">今天</a></li>
                        <li><a href="{:U('Order/goods?time=7')}">近一周</a></li>
                        <li><a href="{:U('Order/goods?time=30')}">近一个月</a></li>
                    </ul>
                </div>

            </div>
        </div>
        <div class="good_nav_sub">
            费用&nbsp; <i class="icon_down"></i>
            <div class="good_nav_sub1">
                <div class="pop">
                    <ul>
                        <li><a href="{:U('Order/goods')}">全部</a></li>
                        <li><a href="{:U('Order/goods?cost=0')}">免费</a></li>
                        <li><a href="{:U('Order/goods?cost=1')}">收费</a></li>
                    </ul>
                </div>

            </div>
        </div>
     </div>
        <div class="list-box">
            <volist name="activeList" id="vo">
                <a href="{:U('Order/details?pid='.$vo['id'])}">
                <dl class="clearfix list-box1">
                    <dt class="list_left">
                        <img src="{$vo.img}" alt="">
                    </dt>
                    <dd class="list_right">
                        <h3>
                            <span>{$vo.title}</span>
                        </h3>
                        <p class="text_one">{:date('m-d H:i',$vo['start_time'])} 开始</p>
                        <p class="text_two"> {$vo.address}</p>
                        <p class="text_three">
                            <if condition="$vo.price eq 0">免费<else/>¥{$vo.price}</if>
                        </p>
                        <p class="text_tip">
                            <if condition="$vo.order_count eq 0">新品上架<else/>已报名{$vo.order_count}</if>

                        </p>
                    </dd>
                </dl>
                </a>
            </volist>
        </div>
    <script>
        $('.good_nav_sub').click(function () {
            $(this).siblings().children('.good_nav_sub1').css('display','none');
            if ($(this).children('.good_nav_sub1').css('display')==='none')
                $(this).children('.good_nav_sub1').css('display','block');
            else
                $(this).children('.good_nav_sub1').css('display','none');

        });
    </script>
</block>